<template>
    <div>
       <h3>{{imginfo.title}}</h3>
       <p class="subtitle">
           <span>发表时间：{{imginfo.addTime | dateFmt}}</span>
           <span>点击：{{imginfo.readNum}}次</span>
       </p>
       <!-- 缩略图区域 -->
        <!-- <img class="preview-img" v-for="(item, index) in imgs" :src="imgdz+item.imgAddr" height="100" @click="$preview.open(index, imgs)" :key="index"> -->

        <div class="thumbs">
            <vue-preview :slides="imgs" @close="handleClose" height="100px"></vue-preview>    
      
        </div>
       <!-- 图片区域 -->
       <div class="content">
           {{imginfo.content}}
       </div>
       <!-- 子评论 -->
       <comment :id="id"></comment>
    </div>
</template>
<script>
import comment from '../news/Comment.vue';
export default {
    components:{comment},
    data(){
        return {
            id:this.$route.params.id,
            imginfo:{},
            imgs:[], 
            imgdz:"http://localhost:3000/images/"

        }
    },
    methods:{
        getInfo(){
            this.$ajax({
                url:"/imginfo/"+this.id,
                method:'get'
            }).then(resp=>{
                this.imginfo = resp.data.message[0];

            });
        },
        //获取缩略图
        getSlt(){
             this.$ajax({
                method:'get',
                url:"/imgs"
            }).then(response=>{
                response.data.message.forEach(item=>{
                    item.w = 600;
                    item.h = 400;
                    item.msrc = this.imgdz+item.imgAddr;//小图
                    item.src = this.imgdz+item.imgAddr;//大图
                });
                this.imgs = response.data.message;
                console.log(this.imgs);
            });
        },
        handleClose () {  //加上这个方法
                console.log('close event')
        }

    },
    created(){
        this.getInfo();
        this.getSlt();

    }
}

</script>
<style scoped>
.content{
    font-size:13px;
    line-height: 30px;
}
.my-gallery{  
              display: flex;
              flex-wrap:wrap;
}
figure{
                 width:400px;
                 height:100px; 
                  margin: 5px; 
                  border:1px solid red;
}
.thumbs >>> img{
                      width: 300px;
                    height: 100%;
                      border-radius: 5px;
}

</style>